<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>canvas-arc-fill-demo</title>

    <style type="text/css">
        .divContent {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: #333333;
            margin-left: 200px;
        }
    </style>

    <!-- JQuery CDN-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <script type="module">

        /**画第一个圆形----非动画版
         */
        let drawArc1 = function () {
            /**获取画布*/
            let canvas = document.getElementById("myCanvas");
            /**
             * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
             * 如下所示，让画布填充父元素
             * @type {void|string|XML|*|jQuery}
             */
            canvas.width = $(".divContent").css("width").replace("px", "");
            canvas.height = $(".divContent").css("height").replace("px", "");

            /**获取画布上下文*/
            let ctx = canvas.getContext("2d");

            /**1)设置路径将要填充的颜色
             * fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
            ctx.fillStyle = "#f00";

            /**2）开始一条新路径
             * beginPath() 方法开始一条路径，或重置当前的路径*/
            ctx.beginPath();

            /**3）创建弧线/曲线
             * 圆心的位置为画布的中心，圆形半径为 50 像素(不能带单位)
             * 起始角度为 0，即 x 轴的正方向，结束角度为 360度*/
            ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI);

            /**4）绘制定义好的路径
             * fill() 方法填充当前的图像（路径）,默认颜色是黑色。*/
            ctx.fill();
        }

        /**画第二个圆—————动画版
         * eAngle：圆形结束的角度，会动态变化达到动画的效果
         * canvas：画布，作为参数传入，避免每次重复获取
         * ctx：画布上下文，作为参数传入，避免每次重复获取
         */
        let eAngle = 0;
        let drawArc2 = function (canvas, ctx) {
            /**
             * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
             * 如下所示，让画布填充父元素
             *
             * 为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
             * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
             * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
             * */
            canvas.width = $(".divContent").css("width").replace("px", "");
            canvas.height = $(".divContent").css("height").replace("px", "");

            /**1)设置路径将要填充的颜色
             * fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
            ctx.fillStyle = "#f00";

            /**2）开始一条新路径
             * beginPath() 方法开始一条路径，或重置当前的路径*/
            ctx.beginPath();

            /**3）创建弧线/曲线
             * true 表示逆时针绘制，false 或者不写为顺时针*/
            ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, eAngle, true);

            /**4）绘制定义好的路径
             * fill() 方法填充当前的图像（路径）,默认颜色是黑色。*/
            ctx.fill();

            /**
             * 将结束角度 + 0.1，然后如果已经达到 360度，则归零
             * 使用 requestAnimationFrame 实现帧动画，每秒约 60 次的循环回调 drawArc2 方法
             * @type {number}
             */
            eAngle = eAngle + 0.1;
            if (eAngle >= 2 * Math.PI) {
                eAngle = 0;
            }
            requestAnimationFrame(function () {
                drawArc2(canvas, ctx);
            });
        }

        $(function () {
            drawArc1();

            /**获取画布*/
            const canvas = document.getElementById("myCanvas2");
            /**获取画布上下文*/
            const ctx = canvas.getContext("2d");
            drawArc2(canvas, ctx);
        });
    </script>

</head>

<body>
    <div class="divContent">
        <canvas id="myCanvas">
            浏览器不支持 Canvas
        </canvas>
    </div>

    <div class="divContent">
        <canvas id="myCanvas2">
            浏览器不支持 Canvas
        </canvas>
    </div>

</body>

</html>